解構賦值的概念,有點像是把一份資料複製到另外一份,在以往我們要把陣列的值取出來,要透過宣告一個變數來放置,如下:
let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let ming = family[0];
let jay = family[1];
let auntie = family[2];
但是如果用解構賦值來處理的話,先宣告一個空的陣列等於要取值的陣列:
let [] = family;
之後把變數放進去我們的空陣列:
let [ming, jay, auntie, mom, father] = family;
這時候我們用 console
查看:
console.log(ming, jay, auntie, mom, father);
就會發現輸出,小明,杰倫,阿姨,老媽,老爸,這就是基本的解構賦值
衍伸出來的問題,就是當我的變數並沒有那麼多的時候,跟我要取值的陣列長度不對等的時候,會發生什麼事?
let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [ming, jay, auntie] = family;
console.log(ming, jay, auntie);
會發現 console
會輸出,小明,杰倫,阿姨,並自動把後面的值給省略
另外一種情況是當我的變數中間有留空位的時候:
let family = ['小明', '杰倫', '阿姨', '老媽', '老爸'];
let [ming, , auntie] = family;
console.log(ming,auntie);
會發現 console
是輸出,小明,阿姨,會自動跳過杰倫,這是值得注意的情況
再來是針對兩個變數的值交換:
let Goku = '悟空';
let Ginyu = '基紐';
以往我們要把上面變數的值交換,可能需要藉由宣告第三個變數來達成,但是解構賦值也能幫我們做到這樣的事情:
[Goku, Ginyu] = [Ginyu, Goku];
console.log(Goku, Ginyu);
這時候在 console
看,會發現值已經交換了
接著是針對字元的拆解,要把下面的字串拆成一個字元一個字元:
let str = '基紐特攻隊';
這時候有點類似最一開始的方式:
let [q, a, z, w, s] = str;
console.log(q, a, z, w, s);
這時候就會單獨各別輸出一個字元了
上面都是針對陣列的部分,解構賦值也可用於物件上:
let GinyuTeam = {
Ginyu: '基紐',
Jeice: '吉斯',
burter: '巴特',
}
如果我們想取出某個屬性的值的時候就可以這樣寫:
let { Ginyu } = GinyuTeam
console.log(Ginyu);
這時候我們在 console
看就會輸出,基紐
當然我們也可以賦予一個我們自定義的變數給它:
let { Ginyu: test } = GinyuTeam
console.log(test);
這時候一樣是輸出,基紐
接著是預設值的部分,解構賦值我們可以給予預設值,當另外一邊沒有值的時候,就會採用預設值:
let [ming = '小明', jay = '杰倫'] = ['阿明']
右邊只有一個阿明,並沒有第二個值,這時候如果用 console
下去看:
console.log(ming, jay);
就會輸出,阿明,杰倫,第二個變數的值就會採用預設值
在物件上也是一樣有預設值:
let { family: ming = '小明' } = {}
console.log(ming);
這時候 console
就會輸出小明,因為右邊沒有任何的值